<template>
  <div class="applyFor">
    <van-nav-bar title="资料修改" left-text="" left-arrow @click-left="onClickLeft" />
    <div class="topTitle">
      <title-item title1st="请填写修改的资料信息"> </title-item>
    </div>
    <div class="Form">
      <van-form @failed="onFailed" @submit="onSubmit">
        <van-cell-group inset>
          <!-- 通过 pattern 进行正则校验 -->
          <van-field v-model="name" name="name" label="分销商名称" label-width="105" placeholder="请输入分销商名称"
            :rules="[{ required: true, message: '请输入分销商名称' }]" />
            <van-field v-model="appellation" type="text" name="appellation" label="(品牌)渠道名称" label-width="105"
              placeholder="请输入(品牌)渠道名称" :rules="[{ required: true, message: '请填写(品牌)渠道名称' }]" />
          <van-field v-model="email" label-width="105" type="text" name="email" label="对账邮箱" placeholder="请输入对账邮箱"
            :rules="[{ required: true, message: '请填对账邮箱' }]" />
          <van-field v-model="account_number" label-width="105" type="text" name="account_number" label="收款账号"
            placeholder="请输入收款账号" :rules="[{ required: true, message: '请填收款账号' }]" />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block native-type="submit" color="linear-gradient(90deg, #218CC9 0%, #2CB9A4 105%)">
            提交
          </van-button>
        </div>
      </van-form>
      <van-popup v-model:show="showPicker" position="bottom">
        <van-area v-model="city" title="城市选择" :area-list="areaList" @confirm="onConfirm" @cancel="showPicker = false"/>
      </van-popup>
    </div>
  </div>
</template>
  
<script setup>
import TitleItem from "@/components/title-item/title-item.vue";
import { useRouter } from "vue-router";
import {
  showToast
} from 'vant';
const router = useRouter();
import { areaList } from '@vant/area-data';
import { distributorUpdate ,getRegionservice} from "@/services";
import { closeToast, showLoadingToast } from "vant";
import { ref ,onMounted} from "vue";
const name = ref("");
const region = ref("");
const email = ref("");
const account_number = ref("");
const showPicker = ref(false);
const appellation = ref("");
let localInfo = localStorage.getItem('userinfo2')
let token = JSON.parse(localInfo).token
// console.log(userInfo)

onMounted(async () => {
  if (token) {
    // userInfo = JSON.parse(localInfo)
    // console.log(userInfo)
    let res = await getRegionservice()
    name.value = res.data.name
    region.value = res.data.region
    email.value = res.data.email
    appellation.value = res.data.appellation
    account_number.value = res.data.account_number
  }
})
const onConfirm = ({ selectedValues, selectedOptions, selectedIndexes }) => {
  region.value = selectedOptions[0]?.text + selectedOptions[1]?.text + selectedOptions[2]?.text;
  showPicker.value = false;
};
const validator = (val) =>
  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
    val
  );

const onFailed = (errorInfo) => {
  console.log("failed", errorInfo);
};
const onSubmit = async (val) => {
  let res = await distributorUpdate(val)
  showToast('修改成功');
  router.push({path:'/home'})
}
// 返回按钮
const onClickLeft = () => {
  router.back();
};
</script>
  
<style lang="scss" scoped>
.applyFor {
  padding: 20px;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  color: #1d1b20;

  .topTitle {
    margin-left: -4px;
  }
}
</style>
  